﻿<html>
<head>
    <meta charset="utf-8">
    <script src='https://cdn.bootcss.com/echarts/3.2.2/echarts.simple.js'></script>
    <script src="echarts-wordcloud.js"></script>
</head>
<body>
    <style>
        html, body, #main {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>
    <div id='main'></div>
    <script>
            var chart = echarts.init(document.getElementById('main'));
            function createRandomItemStyle() {
                return {
                    normal: {
                        color: 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')'
                    }
                };
            };
            var option = {
                tooltip: {},
                series: [ {
                    type: 'wordCloud',
                    shape: 'smooth',
                    gridSize : 2, //网格尺寸
                    size : ['80%','80%'],
                    //sizeRange : [ 50, 100 ],  
                    rotationRange : [ 46, 80 ], //旋转范围
                    autoSize: {
                        enable: true,
                        minSize: 14
                    },
                    textStyle: createRandomItemStyle(),
                    data: [
                        {
                            name: 'Sam S Club',
                            value: 100
                        },
                         {
                             name: 'Sam S Club 1',
                             value: 600
                         },
                         {
                             name: 'Sam S Club 2',
                             value: 80
                         }
                         ,
                         {
                             name: 'Sam S Club 3',
                             value: 77
                         }
                    ]
                } ]
            };

            chart.setOption(option);

    </script>
</body>
</html>